<template>
  <Modal :title="`${title}详情: ${row.srmsg_title}`"
         v-model="status"
         width="760"
         footer-hide>
    <div class="detail-area">
      <div class="data-list">
        <div class="data-box">
          <img :src="require('../images/time.png')" />
          <span class="title">发布时间</span>
          <span class="value">{{row.send_time}}</span>
        </div>
        <div v-if="row.enclosures"
             class="data-box">
          <img :src="require('../images/file.png')" />
          <span class="title">附件</span>
          <span v-if="row.enclosures.length<1"
                class="value">无附件</span>
          <div v-else
               class="file-list">
            <template v-for="enclosure in row.enclosures">
              <span class="file"
                    :key="enclosure.path"
                    @click="downloadFile(enclosure)">{{enclosure.filename}}</span>
            </template>
          </div>
        </div>
        <div v-if="title==='发文'"
             class="data-box">
          <img :src="require('../images/man.png')" />
          <span class="title">接受人</span>
          <span class="value">{{row.receivers.map(item=>item.receiver_name).join('、')}}</span>
        </div>
        <div v-if="title==='收文'"
             class="data-box">
          <img :src="require('../images/man.png')" />
          <span class="title">创建人</span>
          <span class="value">{{row.initer_name}}</span>
        </div>
        <div v-if="title==='收文'"
             class="data-box">
          <img :src="require('../images/man.png')" />
          <span class="title">转发人</span>
          <span class="value">{{row.sender_name}}</span>
        </div>
      </div>
      <div class="comments">
        <div class="title">批示：</div>
        <div v-if="comment">
          <p>{{comment.text}}</p>
        </div>
      </div>
      <div class="detail-content">
        <div class="title">描述：</div>
        <div ref="JDetailContent"></div>
      </div>

    </div>
  </Modal>
</template>

<script>
import { domain2 } from 'global/setting';
import { diyDownload } from 'common/js/util';
import storage from 'good-storage';
import { ajaxPost } from 'global/axios';

export default {
  props: {
    title: {
      type: String,
      default: () => '',
    },
  },

  data() {
    return {
      status: false,
      row: {
        receivers: [],
      },
      comment: '' //批示
    };
  },

  methods: {
    show(row) {
      this.status = true;
      this.row = row;
      this.$nextTick(() => {
        this.getData(row._id);
      });

      if (this.title === '收文' && row.is_read === '0') {
        this.read(row._id);
      }
    },

    getData(_id) {
      this.loading = true;
      ajaxPost({
        url: '/bus/srmsg/find',
        token: storage.session.get('token'),
        data: {
          _id,
        },
        success: res => {
          this.loading = false;
          if (res.data.code === '0000') {
            this.$refs.JDetailContent.innerHTML = res.data.result.srmsg_text;
            let comments = res.data.result.comments;
            this.comment = comments && comments.length > 0 ? comments[comments.length - 1] : '';
          }
        },
      });
    },

    // 下载文件
    downloadFile(data) {
      diyDownload(`${domain2}${data.path}`, data.filename);
    },

    // 更改阅读状态
    read(_id) {
      ajaxPost({
        data: {
          _id,
        },
        url: '/bus/srmsg/read',
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code === '0000') {
            this.$emit('update');
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scope>
.data-list {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  .data-box {
    flex: 0 0 364px;
    margin-bottom: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    span {
      display: block;
    }
    img {
      margin-bottom: 2px;
      flex: 0 0 14px;
      height: 14px;
      display: block;
      margin-right: 5px;
    }
    .title {
      flex: 0 0 75px;
      height: 18px;
      line-height: 18px;
      font-size: 14px;
      color: #999;
    }
    .value {
      flex: 1;
      line-height: 18px;
      font-size: 14px;
      color: #515a6e;
    }
    .file-list {
      flex: 1;
      .file {
        margin-bottom: 5px;
        font-size: 14px;
        line-height: 14px;
        color: #515a6e;
        cursor: pointer;
        word-break: break-all;
      }
      .file:hover {
        color: #1a96fe;
      }
    }
  }
}
.detail-content {
  padding: 15px 0;
  font-size: #333;
  .title {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    color: #999;
  }
}
// 批示
.comments {
  .title {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    color: #999;
  }
  p {
    word-break: break-all;
  }
}
</style>